<template>
  <div class='container'>
    <el-table :data="tableData">
      <el-table-column type="index" :index="indexMethod" label="序号" width="80" />
      <el-table-column prop="subjectName" label="学科名称" min-width="180" />
      <el-table-column prop="username" label="创建者" min-width="180" />
      <el-table-column label="创建日期" min-width="180">
        <template #default="{row}">{{getTime(row.addDate)}}</template>
      </el-table-column>
      <el-table-column label="前台是否显示" min-width="120">
        <template #default="{row}">{{row.isFrontDisplay?'是':'否'}}</template>
      </el-table-column>
      <el-table-column prop="twoLevelDirectory" label="二级目录" min-width="120" />
      <el-table-column prop="tags" label="标签" min-width="120" />
      <el-table-column prop="totals" label="题目数量" min-width="120" />
      <el-table-column label="操作" fixed="right" width="220">
        <template #default="{row}">
          <el-button type="text" size="small" @click="todirectorys(row)">学科分类</el-button>
          <el-button type="text" size="small" @click="toTags(row)"> 学科标签</el-button>
          <el-button type="text" size="small" @click="openDialog(row)">修改</el-button>
          <el-button type="text" size="small" @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects.js'
import { getTimes } from '@/utils'
export default {
  name: 'subjects-table',
  props: ['page', 'pageSize'],
  data () {
    return {
      tableData: []
    }
  },

  created () {
    this.getlist({ page: this.page, pagesize: this.pageSize })
  },
  methods: {
    indexMethod (index) {
      return index + 1 + (this.page - 1) * this.pageSize
    },
    async getlist (data) {
      const res = await list(data)
      // console.log(res)
      if (res.status !== 200) return this.$message.error('获取失败')
      this.tableData = res.data.items
      this.$emit('getData', res.data)
      return res.data
    },
    // 格式化时间
    getTime (time) {
      return getTimes(time)
    },
    handleDel (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', {
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        // console.log(res)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        const data = await this.getlist({ page: this.page, pagesize: this.pageSize })
        // console.log(data)
        if (data.pages >= 1 && data.items.length === 0) {
          this.$emit('pageChange')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 修改弹窗
    openDialog (row) {
      this.$emit('openDialog', row)
    },
    // 跳转去标签页面
    toTags (row) {
      console.log(row)
      this.$router.push({
        path: `/subjects/tags?id=${row.id}&name=${row.subjectName}`
        // query: {
        //   subjectId: row.id
        // }
      })
    },
    // 跳转去标签页面
    todirectorys (row) {
      console.log(row)
      this.$router.push({
        path: `/subjects/directorys?id=${row.id}&name=${row.subjectName}`
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
